import React,{useState,useEffect} from 'react'
import './css/index.css'
import { Stepper } from 'react-vant';
import Header from '../index/component/header'
import SearchBar from '../index/component/SearchBar'
import axios from '../../../axios/axios';
import {useNavigate} from 'react-router-dom'
export default function index() {
  let navigate = useNavigate()
  let [cartList,setCartList] = useState([])
  let [count,setcount]= useState(0)
  let [total,setTotal] = useState(0)
  let getCartList = ()=>{
    axios.get('http://localhost:3000/fan/shop_cart').then(res=>{
      console.log(res.data.data);
      setCartList(res.data.data)
      let sum = res.data.data.length
      setTotal(sum)
     })
  }

  let editCart = (id,isable)=>{
    axios.put('http://localhost:3000/fan/editcart',{id:id,isable:isable}).then(res=>{
      console.log(res);
      getCartList()
    })
  }
  let editnum = (id,num)=>{
    axios.put('http://localhost:3000/fan/editnum',{id:id,num:num}).then(res=>{
      console.log(res);
      getCartList()
    })
  }
  let delCart = (id)=>{
    axios.post('http://localhost:3000/fan/deletecart',{id:id}).then(res=>{
      console.log(res);
      getCartList()
    })
  }
  useEffect(()=>{
    getCartList()
  },[])
  useEffect(()=>{
    price()
    
  },[cartList])
  let price=()=>{
    let sum = 0;
    cartList.forEach(item=>{
     if (item.isable){
       sum += item.price * item.num
     }
    })
    setcount(sum)
  }
  return (
    <div className='index'>
      <Header></Header>
      <SearchBar></SearchBar>
      <div className='cart-title'>
        <p>全部商品 {total}</p>
      </div>
      <table className='cart-table'>
      <thead>
        <tr>
          <td style={{width:'3%',textAlign:'center'}}><input type="checkbox"/></td>
          <td style={{fontWeight:'600',width:'10%'}}>全选</td>
          <th style={{width:'25%'}}>商品</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        {
          cartList.map((item,index)=>{
            return(
              <tr key={index} className='cart-item'>
                <td style={{width:'3%',textAlign:'center'}}>
                  <input type="checkbox" checked={item.isable} onChange={()=>{
                    editCart(item._id,item.isable)
                  
                  }}/>
                  </td>
                <td>
                  <img src={item.image} alt="" style={{width:'100px'}}/>
                </td>
                <td style={{width:'25%'}}>{item.name}</td>
                <td>￥{item.price}/kg</td>
                <td>
                  <Stepper
                  min={0}
                  value={item.num}
                  onChange={v => {
                    editnum(item._id,v)
                  
                  }}
                  />
                </td>
                <td>{item.price*item.num}￥</td>
                <td
                onClick={()=>{delCart(item._id)}}
                >删除</td>
              </tr>
            )
          })
        }
      </tbody>
      </table>
      <div style={{height:'70px'}}></div>
      <div className='cart-footer'>
        <div className='cart-footer-left'>删除选择商品</div>
        <div className='cart-footer-right'>
          <div>
            合计：￥{count}
          </div>
          <div className='cart-footer-btn' onClick={()=>{
           
          }}>
            去结算
          </div>
        </div>
      </div>
    </div>
  )
}
